<template>
    <div class="clientpond">
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="客户" title="客户公池"></crumbs>
        </div>
        <div class="paddingbox">
            <div class="formbox">
                <div class="top">
                    <div class="toptext">筛选</div>
                    <div class="clear" @click="clearform">
                        <img src="../../assets/image/容器.png" alt="">
                        <span>清除</span>
                    </div>
                </div>
                <div class="formcontent">
                    <div class="formitem">
                        <div class="lable">客户名称：</div>
                        <el-input clearable @input="changecompanyname" v-model="companyname" style="width: 265px;"
                            placeholder="请输入客户名称" :prefix-icon="Search" />
                        <div class="lable">地区：</div>
                        <el-select style="width: 300px;" clearable @change="getqueryallcompany" v-model="area" filterable placeholder="请选择">
                            <el-option v-for="item in provincelist" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="tablebox">
                <div class="flexbox">
                    <el-table :data="khgctabledate.length===0?[]:khgctabledate.slice(0, isdouble?khgctabledate.length/2:(khgctabledate.length-1)/2 + 1)" style="width: 50%;margin-right: 20px;"
                        :header-cell-style="{
                            background: '#FAFAFC',
                            color: '#202536',
                        }">
                        <el-table-column prop="companyName" label="客户名称" />
                        <el-table-column prop="createTime" label="注册时间" />
                    </el-table>
                    <el-table :data="khgctabledate.length===0?[]:khgctabledate.slice(isdouble?khgctabledate.length/2:(khgctabledate.length-1)/2 + 1,khgctabledate.length)" style="width: 50%" :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536',
                    }">
                        <el-table-column prop="companyName" label="客户名称" />
                        <el-table-column prop="createTime" label="注册时间" />
                    </el-table>
                </div>
                <pagination :total="khgctotal" :currentPage="khgcpagenum" :pageSize="khgcpagesize"
                    @SizeChange="changekhgcpagesize" @CurrentChange="changekhgcpagenum"></pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { shake } from '../../utils/utils'
import { Search } from '@element-plus/icons-vue'
import { getqueryallcompanyapi } from '../../api/api'


const state = reactive({
    option: {
        grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                data: ['芳草地国际', '实验小学', '白家庄小学', '外国语小学', '师范学校附属', '望京东园'],
                axisTick: { alignWithLabel: true },
                axisLabel: { interval: 0, rotate: 30 },
            },
        ],
        yAxis: [
            {
                type: 'value',
            },
        ],
        series: [
            {
                name: '学校',
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    barBorderRadius: [5, 5, 0, 0],
                },
                data: [260, 680, 360, 460, 150, 320],
            },
        ],
    },
})
const initeCharts = () => {
    const myChart = echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption(option)
    myChart.on('click', (params) => {
        console.log(params)
    })
}
const getqueryallcompany = () => {
    getqueryallcompanyapi({
        companyName: companyname.value,
        pageSize: khgcpagesize.value,
        pageNum: khgcpagenum.value,
        area: area.value
    }).then((res: any) => {
        console.log(res, '客户池')
        khgctabledate.value = res.rows
        if (khgctabledate.value.length % 2 === 1) {
            console.log('单')
            isdouble.value = false
        } else if (khgctabledate.value.length % 2 === 0) {
            console.log('双')
            isdouble.value = true
        }
        khgctotal.value = res.total
    })
}
const isdouble = ref(false)
onActivated(() => {
    getqueryallcompany()
})
const slice1 = ref(0)
const slice2 = ref(0)
const khgctabledate = ref<any>([])
const khgctotal = ref(0)
const khgcpagesize = ref(30)
const khgcpagenum = ref(1)
const changekhgcpagesize = (val: any) => {
    khgcpagesize.value = val
    khgcpagenum.value = 1
    getqueryallcompany()
}
const changekhgcpagenum = (val: any) => {
    khgcpagenum.value = val
    getqueryallcompany()
}
const changecompanyname = (val: any) => {
    shake(getqueryallcompany, 400)
}
const clearform = () => {
    companyname.value = ''
    area.value = ''
    getqueryallcompany()
}
const companyname = ref('')
const area = ref('')
const provincelist = ref(
    [
        { label: '北京', value: '北京' },
        { label: '天津', value: '天津' },
        { label: '河北', value: '河北' },
        { label: '山西', value: '山西' },
        { label: '内蒙古', value: '内蒙古' },
        { label: '辽宁', value: '辽宁' },
        { label: '吉林', value: '吉林' },
        { label: '黑龙江', value: '黑龙江' },
        { label: '上海', value: '上海' },
        { label: '江苏', value: '江苏' },
        { label: '浙江', value: '浙江' },
        { label: '安徽', value: '安徽' },
        { label: '福建', value: '福建' },
        { label: '江西', value: '江西' },
        { label: '山东', value: '山东' },
        { label: '河南', value: '河南' },
        { label: '湖北', value: '湖北' },
        { label: '湖南', value: '湖南' },
        { label: '广东', value: '广东' },
        { label: '广西', value: '广西' },
        { label: '海南', value: '海南' },
        { label: '重庆', value: '重庆' },
        { label: '四川', value: '四川' },
        { label: '贵州', value: '贵州' },
        { label: '云南', value: '云南' },
        { label: '西藏', value: '西藏' },
        { label: '陕西', value: '陕西' },
        { label: '甘肃', value: '甘肃' },
        { label: '青海', value: '青海' },
        { label: '宁夏', value: '宁夏' },
        { label: '新疆', value: '新疆' },
        { label: '台湾', value: '台湾' },
        { label: '香港', value: '香港' },
        { label: '澳门', value: '澳门' }
    ])
const back = () => {
    window.history.back()
}
</script>



<style lang="scss" scoped>
.tablebox {
    margin-top: 16px;
    background-color: #ffffff;
    padding: 16px;
}

.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.formbox {
    background-color: #ffffff;
    border-top-right-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 24px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            margin-right: 50px;
            display: flex;
            align-items: center;

            .formitemflexone {
                display: flex;
                align-items: center;
                flex: 1;
            }

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
                text-align: right;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #F4F4F7;

        .toptext {
            color: #3D3D3D;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497B1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}
</style>